import React from 'react'
import { Modal ,Form} from 'antd'
import StateMixin from 'reflux-state-mixin'
import SrvListAction from 'pages/servicelist/actions/serviceListAction.js'
import SrvListStore from 'pages/servicelist/stores/serviceListStore.js'
import ServiceTreeList from 'pages/servicelist/serviceTree.jsx'
import ServiceNew from 'pages/servicelist/serviceNew.jsx'

const FormItem = Form.Item;

export default React.createClass({
  mixins: [StateMixin.connect(SrvListStore)],
  getInitialState() {
    return {
      visible: false,
      currentSrvCat:null,
      currentKey:{},
      showWarnSpan:false,
      errorMsg:'',
      creatMenuVisible : false,
      delMenuVisible : false,
      currentSelected: '1',
      openKeys:[]
    }
  },

  changeSelectState(currentSelected, openKeys) {
    this.setState({
      currentSelected,openKeys
    })
  },

  //切换树
  changeSrvCat(srvId) {
    // log("changeTree:" + srvId)
    this.setState({
      currentSrvCat: srvId,
      currentKey:null
    });
    SrvListAction.getSrvCatBaseInfoById(srvId);
  },

  getSrvList() {
    SrvListAction.getSrvList();
  },
  componentDidMount() {
    this.getSrvList();
  },
  //新建服务目录
  showModal() {
    this.setState({
      visible: true,
    });
  },

  //新建子目录.删除
  showModal2(e) {
    let type = e.key.split('/');
    if (type[0] === "creat") {
      this.setState({
        creatMenuVisible : true,
        createSrvId : type[1],
        showWarnSpan:false
      });
    } else if (type[0] === "del") {
      Modal.confirm({
        title: '您是否确认要删除该服务目录',
        onOk() {
          SrvListAction.deleteSrvCatById({
            "id":type[1]
          }).then(() => {
            SrvListAction.getSrvList().then((data)=>{
              log(data)
              // changeSrvCat(data[0].id)
            });

          });
        },
        onCancel() {},
      });
    }
  },


  handleOk() {
    var value = this.refs.myTextInput.value ;
    if (value === '' || value === 'undefined') {
      return false;
    }
    if (this.state.showWarnSpan) {
      return false;
    }
    SrvListAction.createSrvCatDir({
      "title": value
    }).then((data) => {
      this.setState({
        visible: false,
      });
      this.getSrvList();
      this.changeSrvCat(data);
      this.refs.myTextInput.value = null;
    })
  },

  handleCancel() {
    this.setState({
      visible: false,
      delMenuVisible : false,
      showWarnSpan: false
    });
    this.refs.myTextInput.value = null;
  },

  handleCreateSrvCatName() {
    let srvId = this.state.createSrvId;
    var value = this.refs.createSrvCatName.value ;
    if (value === '' || value === 'undefined') {
      return false;
    }
    if (this.state.showWarnSpan) {
      return false;
    }
    SrvListAction.createSrvCatDir({
      "title": value,
      "parentId":srvId
    }).then((data) => {
      this.setState({
        creatMenuVisible: false,
      });
      this.getSrvList();
      this.changeSrvCat(data);
      this.refs.createSrvCatName.value = null;
    })
  },
  handleCreatCancel () {
    this.setState({
      creatMenuVisible : false
    })
    this.refs.createSrvCatName.value = null;
  },

  render() {
    return (
      <div className="content-wrap">
        <div className="config-main user-group-main">
          <Modal  title="新建服务目录"   visible={this.state.visible}
          onOk={this.handleOk} onCancel={this.handleCancel}>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 12 }}
                      label="目录名称" hasFeedback>
              <input style={{ width: '100%' }} className="ant-input ant-input-lg"
                placeholder="请输入目录名称"
                onChange={this.handleChange} ref="myTextInput"/>
            </FormItem>
            <div className='validation-span'><span style={{display:this.state.showWarnSpan ? '' : 'none'}}
                >{this.state.errorMsg}</span></div>
          </Modal>

          <Modal  title="子服务目录"
                  visible={this.state.creatMenuVisible}
            onOk={this.handleCreateSrvCatName} onCancel={this.handleCreatCancel}>
            <FormItem labelCol={{ span: 7 }} wrapperCol={{ span: 12 }}
                      label="目录名称"
                      hasFeedback>
              <input style={{ width: '100%' }} className="ant-input ant-input-lg"
                placeholder="请输入子目录名称"
                onChange={this.handleChange1} ref="createSrvCatName"/>
            </FormItem>
            <div className='validation-span'><span style={{display:this.state.showWarnSpan ? '' : 'none'}}
                >{this.state.errorMsg}</span></div>
          </Modal>
        <div/>

        <div className="top-left">
          <div>
            <h3 className="group-title">
             服务目录
            </h3>
          </div>
        </div>

        <div className="bottom-left">
          <ServiceTreeList changeSelectState={this.changeSelectState}
          currentSelected={this.state.currentSelected} openKeys={this.state.openKeys}
          showModal={this.showModal} showModal2={this.showModal2}
          changeSrvCat={this.changeSrvCat}/>
        </div>
         
        <div className="bottom-right">
        {
          this.state.currentSrvCat ?
            <ServiceNew srvCatIde={this.state.currentSrvCat}/> :
          <div>请先选择服务目录</div>
        }
        </div>
      </div>
    </div>
    )
  }
});
